<template>
  <div v-loading="loading">
    <div>
      <el-input placeholder="请输入表名后回车" @change="searchName" style="width:200px;"></el-input>
      <el-button @click="handleAdd" type="button">新增简易跟踪</el-button>&nbsp;
      <span>以下展示的疑似为监控作用的触发器；本新增功能全系统禁止超过20个；本系统无法对触发器内容做任何更改；只能删除自动生成的触发器</span>
    </div>
    <el-table
      ref="singleTable"
      :data="tableData"
      :row-style="rowStyle"
      @current-change="handleCurrentChange"
      highlight-current-row
      size="mini"
      style="width: 100%"
    >
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column property="TriggerName" label="触发器名称"></el-table-column>
      <el-table-column property="TableName" label="表名" width="300"></el-table-column>
      <el-table-column property="TriggerType" label="类型" width="250"></el-table-column>
      <el-table-column property="CreatedDate" label="创建时间" width="150"></el-table-column>
      <el-table-column property="IsOpen" label="是否打开" width="100">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.IsOpen"
            active-color="#00A854"
            inactive-color="#F04134"
            @change="changeSwitch(scope.row)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column property="Remarks" label="备注" width="150" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.row)" type="text" size="small">查看内容</el-button>
          <el-button @click="handleDelete(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="查看内容" :visible.sync="dialogFormVisible">
      <el-form :model="editData">
        <el-form-item label="触发器名字" size="mini">
          <el-input
            v-model="editData.TriggerName"
            auto-complete="off"
            :disabled="nameDisable"
            size="mini"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注" size="mini">
          <el-input
            type="textarea"
            v-model="editData.Remarks"
            auto-complete="off"
            size="mini"
            :autosize="{ minRows: 5, maxRows: 5}"
          ></el-input>
        </el-form-item>
        <el-form-item label="触发器内容" size="mini">
          <el-input
            type="textarea"
            v-model="editData.TriggerContent"
            auto-complete="off"
            size="mini"
            :disabled="true"
            :autosize="{ minRows: 10, maxRows: 15}"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleUpdateCancel">取 消</el-button>
        <el-button type="primary" @click="handleUpdateOk" :disabled="editOkDisable">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="新增监控类触发器" :visible.sync="addDialogVisible">
      <el-form :model="addData">
        <el-autocomplete
          v-model="addData.Table"
          :fetch-suggestions="querySearchTableAsync"
          placeholder="请输入表名"
        ></el-autocomplete>
        <el-autocomplete
          v-model="addData.Field"
          :fetch-suggestions="querySearchFieldAsync"
          placeholder="请输入字段名"
        ></el-autocomplete>
        <el-form-item label="备注" size="mini">
          <el-input
            type="textarea"
            v-model="addData.Remarks"
            auto-complete="off"
            size="mini"
            :autosize="{ minRows: 5, maxRows: 5}"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleOk" :disabled="addOkDisable">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "LogType",
  data() {
    return {
      nameDisable: false,
      tableData: [],
      loading: false,
      allData: [],
      currentRow: {},
      editData: {},
      addData: {},
      dialogFormVisible: false,
      addDialogVisible: false,
      url: this.$store.state.serviceUrl,
      timeout: null,
      addOkDisable: false,
      editOkDisable: false,
    };
  },
  methods: {
    handleOk() {
      var ajaxParam = {
        type: "AddTrigger",
        trigger: Base64.encode(JSON.stringify(this.addData)),
      };
      this.addOkDisable = true;
      this.$http.post(this.url, ajaxParam, { emulateJSON: true }).then(
        (m) => {
          this.$message({
            type: "success",
            message: "保存成功!",
          });
          this.refreshData();
          this.addDialogVisible = false;
          this.addOkDisable = false;
        },
        (e) => {
          this.$message(e.bodyText);
          this.addOkDisable = false;
        }
      );
    },
    handleDelete(row) {
      this.$confirm(
        "此操作将永久删除该触发器[" + row.TriggerName + "], 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.$http
            .post(
              this.url,
              {
                type: "DelTrigger",
                trigger: Base64.encode(JSON.stringify(this.currentRow)),
              },
              { emulateJSON: true }
            )
            .then(
              (m) => {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.refreshData();
              },
              (e) => {
                this.$message(e.bodyText);
              }
            );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleUpdateCancel() {
      this.dialogFormVisible = false;
      this.editData = {};
    },
    handleUpdateOk() {
      var ajaxParam = {
        type: "UpdateTrigger",
        trigger: Base64.encode(JSON.stringify(this.editData)),
      };
      this.$http.post(this.url, ajaxParam, { emulateJSON: true }).then(
        (m) => {
          this.$message({
            type: "success",
            message: "保存成功!",
          });
          this.refreshData();
          this.dialogFormVisible = false;
          this.editOkDisable = false;
        },
        (e) => {
          this.editOkDisable = false;
          this.$message(e.bodyText);
        }
      );
    },
    querySearchTableAsync(queryString, cb) {
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        this.$http
          .post(
            this.url,
            {
              type: "SearchTable",
              tablename: Base64.encode(this.addData.Table),
            },
            { emulateJSON: true }
          )
          .then(
            (m) => {
              cb(m.body);
            },
            (e) => {
              this.$message(e.bodyText);
              this.loading = false;
            }
          );
      }, 500);
    },
    querySearchFieldAsync(queryString, cb) {
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        this.$http
          .post(
            this.url,
            {
              type: "SearchField",
              tablename: Base64.encode(this.addData.Table),
              fieldname: Base64.encode(this.addData.Field),
            },
            { emulateJSON: true }
          )
          .then(
            (m) => {
              cb(m.body);
            },
            (e) => {
              this.$message(e.bodyText);
              this.loading = false;
            }
          );
      }, 500);
    },
    handleEdit(row) {
      this.currentRow = row;
      this.editData = JSON.parse(JSON.stringify(this.currentRow));
      this.editData.mode = 3;
      this.nameDisable = true;
      this.dialogFormVisible = true;
    },
    handleAdd() {
      this.addData = {};
      this.addData.mode = 1;
      this.addDialogVisible = true;
    },
    handleCurrentChange(val) {
      if (val) {
        this.currentRow = val;
      }
    },
    searchName(value) {
      this.tableData = this.allData.filter((e) => {
        return e.TableName.toLowerCase().indexOf(value.toLowerCase()) !== -1;
      });
    },
    rowStyle({ row, rowIndex }) {},
    changeSwitch(row) {
      this.$http
        .post(
          this.url,
          {
            type: "SetTriggerStatus",
            name: Base64.encode(row.TriggerName),
            tablename: Base64.encode(row.TableName),
            isOpen: row.IsOpen,
          },
          { emulateJSON: true }
        )
        .then(
          (m) => {
            this.refreshData();
          },
          (e) => {
            this.$message(e.bodyText);
          }
        );
    },
    refreshData() {
      this.loading = true;
      this.$http
        .post(this.url, { type: "GetAllTrigger" }, { emulateJSON: true })
        .then(
          (m) => {
            m.body.forEach(function (item, index) {
              item.IsOpen = item.IsDisabled ? false : true;
            });
            this.allData = m.body;
            this.tableData = m.body;
            this.loading = false;
          },
          (e) => {
            this.$message(e.bodyText);
            this.loading = false;
          }
        );
    },
  },
  mounted() {
    this.refreshData();
  },
  filters: {},
};
</script>
<style scoped>
.el-table .el-table__row td {
  padding: 13px !important;
}
</style>
